import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';

import * as LinkStories from './Link.stories';

<Meta of={LinkStories} />

# Link

The purpose of the Link component is to enable seamless navigation by connecting users to other pages, sections, or resources. It provides a consistent, accessible, and visually recognizable way to interact with content, ensuring clarity and usability while maintaining the design system's cohesion.

## Usage

<Canvas of={LinkStories.Documentation} source={ { code: `
import React from "react";
import { Link } from "@webiny/admin-ui";

const LinkExample = () => {
    return (
        <div>
            <p>
                This is a paragraph with a <Link to="/dashboard">link to the dashboard</Link> in it.
            </p>
            <p>
                <Link to="/settings" variant="secondary" size="lg">
                    This is a large secondary link
                </Link>
            </p>
            <p>
                <Link to="/help" underline={true}>
                    This link is underlined by default
                </Link>
            </p>
        </div>
    );
};

export default LinkExample;

` } }
        additionalActions={[
            {
                title: 'Open in GitHub',
                onClick: () => {
                    window.open(
                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Link/Link.tsx',
                        '_blank'
                    );
                },
            }
        ]}
/>

<Controls of={LinkStories.Documentation} />

```tsx
import React from "react";
import { Link } from "@webiny/admin-ui";

const LinkExample = () => {
    return (
        <div>
            <p>
                This is a paragraph with a <Link to="/dashboard">link to the dashboard</Link> in it.
            </p>
            <p>
                <Link to="/settings" variant="secondary" size="lg">
                    This is a large secondary link
                </Link>
            </p>
            <p>
                <Link to="/help" underline={true}>
                    This link is underlined by default
                </Link>
            </p>
        </div>
    );
};

export default LinkExample;
```

## Examples

### Default

<Canvas of={LinkStories.Default} source={ { code: `
import React from "react";
import { Link } from "@webiny/admin-ui";

const DefaultLinkExample = () => {
    return (
        <Link to="#">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.
        </Link>
    );
};

export default DefaultLinkExample;
` } } />

### Size Variants

#### Extra Large (XL)

<Canvas of={LinkStories.LinkXl} source={ { code: `
import React from "react";
import { Link } from "@webiny/admin-ui";

const XlLinkExample = () => {
    return (
        <Link to="#" size="xl">
            Extra large link
        </Link>
    );
};

export default XlLinkExample;
` } } />

#### Large (LG)

<Canvas of={LinkStories.LinkLg} source={ { code: `
import React from "react";
import { Link } from "@webiny/admin-ui";

const LgLinkExample = () => {
    return (
        <Link to="#" size="lg">
            Large link
        </Link>
    );
};

export default LgLinkExample;
` } } />

#### Medium (MD)

<Canvas of={LinkStories.LinkMd} source={ { code: `
import React from "react";
import { Link } from "@webiny/admin-ui";

const MdLinkExample = () => {
    return (
        <Link to="#" size="md">
            Medium link
        </Link>
    );
};

export default MdLinkExample;
` } } />

#### Small (SM)

<Canvas of={LinkStories.LinkSm} source={ { code: `
import React from "react";
import { Link } from "@webiny/admin-ui";

const SmLinkExample = () => {
    return (
        <Link to="#" size="sm">
            Small link
        </Link>
    );
};

export default SmLinkExample;
` } } />

### Inherited Size

<Canvas of={LinkStories.InheritedSize} source={ { code: `
import React from "react";
import { Link, Text } from "@webiny/admin-ui";

const InheritedSizeLinkExample = () => {
    return (
        <Text>
            <Text size="lg">
                Size of this text is set to large, so,&nbsp;
                <Link to="#">this link's</Link> size is also automatically set to large.
            </Text>
        </Text>
    );
};

export default InheritedSizeLinkExample;
` } } />

### With Underline

<Canvas of={LinkStories.WithUnderline} source={ { code: `
import React from "react";
import { Link } from "@webiny/admin-ui";

const UnderlinedLinkExample = () => {
    return (
        <Link to="#" underline={true}>
            This link is underlined by default
        </Link>
    );
};

export default UnderlinedLinkExample;
` } } />

### Primary Negative

<Canvas of={LinkStories.PrimaryNegative} source={ { code: `
import React from "react";
import { Link, Text } from "@webiny/admin-ui";

const PrimaryNegativeLinkExample = () => {
    return (
        <div className="bg-[#25292e] p-[300px] rounded-[5px] text-neutral-dimmed">
            <Text>
                Lorem <Link to="#" variant="primary-negative">ipsum dolor sit amet</Link>, consectetur adipiscing elit.
                Fusce tempus tortor eu sapien interdum rhoncus.
            </Text>
        </div>
    );
};

export default PrimaryNegativeLinkExample;
` } } />

### Secondary Negative

<Canvas of={LinkStories.SecondaryNegative} source={ { code: `
import React from "react";
import { Link, Text } from "@webiny/admin-ui";

const SecondaryNegativeLinkExample = () => {
    return (
        <div className="bg-[#25292e] p-[300px] rounded-[5px] text-neutral-dimmed">
            <Text>
                Lorem <Link to="#" variant="secondary-negative">ipsum dolor sit amet</Link>, consectetur adipiscing elit.
                Fusce tempus tortor eu sapien interdum rhoncus.
            </Text>
        </div>
    );
};

export default SecondaryNegativeLinkExample;
` } } />

## Anatomy

### Primary
<img src="/images/storybook/link/primary.png" alt="Primary"/>

### Secondary
<img src="/images/storybook/link/secondary.png" alt="Secondary"/>

### Sizing
Links inherit font styles of surrounding text.
<img src="/images/storybook/link/sizing.png" alt="Sizing"/>

### State
<img src="/images/storybook/link/states.png" alt="State"/>

## Usage
<img src="/images/storybook/link/usage.png" alt="Usage"/>
